<template>
  <div class="top100-horizontal-bar-chart">
    <BaseCharts
        ref="baseChartsRef"
        :options="chartOptions"
        :autoRander="autoRander"
        :autoNumber="autoNumber"
        :height="height"
    />
  </div>
</template>

<script setup>
import { computed } from "vue";
import BaseCharts from "@/components/echarts/vpt-base-chart/index.vue";

const props = defineProps({
  data: { type: Array, default: () => [] },
  autoRander: { type: Boolean, default: false },
  autoNumber: { type: Number, default: 60 },
  height: { type: String, default: "3.4rem" },
});

const chartOptions = computed(() => {
  // 对数据进行降序排序
  const sortedData = [...props.data].sort((a, b) => b.value - a.value);

  return {
    tooltip: {
      trigger: "axis",
      axisPointer: { type: "shadow" },
    },
    legend: { show: false }, // 隐藏图例
    grid: {
      top: "5%",
      right: "0%",
      bottom: "0%",
      left: "0%",
      containLabel: true, // 确保标签在网格内
    },
    xAxis: {
      type: "value",
      show: false, // 隐藏整个x轴
      axisLabel: { show: false },
      axisTick: { show: false },
      axisLine: { show: false },
      splitLine: { show: false },
    },
    yAxis: {
      type: "category",
      data: sortedData.map((item, index) => `${index + 1}. ${item.name}`), // 添加序号
      axisLabel: {
        show: true, // 显示y轴标签
        position: "left", // 标签位置在左侧
        align: "left", // 标签文字左对齐
        margin: 10, // 标签与轴线的距离
      },
      axisTick: {
        show: false, // 隐藏刻度线
      },
      axisLine: {
        show: false, // 隐藏轴线
      },
      inverse: true, // 使条形从上到下按降序排列
      splitLine: { show: false }, // 关闭刻度横线
    },
    series: [
      {
        type: "bar",
        data: sortedData.map((item) => item.value),
        barWidth: 12,
        itemStyle: {
          borderRadius: [0, 6, 6, 0], // 右侧圆角
          color: "#5470c6", // 自定义颜色
        },
        label: {
          show: true,
          position: "right", // 标签显示在右侧
          formatter: "{@value}TB", // 显示数值+单位
        },
      },
    ],
  };
});
</script>

<style scoped>
.top100-horizontal-bar-chart {
  width: 100%;
  height: v-bind(height);
  background: #f5f5f5;
  border-radius: 0.1rem;
}
</style>